/*postcss-pxtransform disable*/
@import './_function_v2.scss';

.msite-rec {
	
	&::after {
		width: 100%;
	}

	&__title {
		margin: 10px 5px;
		line-height: 16px;
		text-align: center;
		position: relative;
		&-con {
			text-align: center;
			display: inline-block;
			background: #F3F5F7;
			padding: 0 10px;
			position: relative;
			z-index: 1;
		}
		&-line {
			width: 100%;
			position: absolute;
			top: 8px;
			&::after {
				@include border(bottom, #cbcbcb);
			}
		}
		&-icon {
			display: inline-block;
			background: url();
	    background-repeat: no-repeat;
	    background-size: 13px 13px;
	    width: 13px;
	    height: 13px;
	    margin-right: 5px;
	    position: relative;
	    vertical-align: middle;
	    margin-top: -2px;
		}
	}
	&__goods {
		overflow: hidden;

	}
	&__good {
		float: left;
		// width: rem(740 / 4);
		width: 50%;
		box-sizing: border-box;
		// background: #fff;
		position: relative;
		margin-bottom: 4px;
		&:nth-child(odd) {
			// margin-right: rem(5);
			padding-right: 2px;
		}
		&:nth-child(even) {
			// margin-right: rem(5);
			padding-left: 2px;
		}
		&-inner {
			background: #fff;
			position: relative;
			overflow: hidden;
		}
		&-reason {
			position: absolute;
			bottom: 0;
			text-align: center;
			width: 100%;
			font-size: 12px;
			line-height: 25px;
			background: rgba(0,0,0,0.6);
			color: #fff;
		}
		&-pic {
			// @include placeholder(1);
      position: relative;
      width: 100%;
      height: 100%;
      &__img {
        width: 100%;
        height: 375rpx;
      }
		}
		&-desc {
			padding: 0 5px;
			@include line(2);
			line-height: 18px;
			height: 36px;
			margin: 3px 0;
			font-size: 12px;
		}
		&-price {
			padding: 0 5px;
			color: #f23030;
			font-size: 16px;
			line-height: 20px;
			height: 20px;
			// @include line(1);
			overflow: hidden;
			b {
				font-weight: normal;
				font-size: 12px;
			}
		}
		&-tip {
			font-size: 10px;
			color: #999;
			padding: 0 5px;
			line-height: 20px;
			height: 20px;
			margin-top: 4px;
			margin-bottom: 5px;
		}
		&-btn {
			position: absolute;
			right: 5px;
			bottom: 5px;
			width: 50px;
			height: 24px;
			line-height: 24px;
			font-size: 12px;
			text-align: center;
			&::after {
				@include border(full, #bfbfbf, 4px);
			}
		}
	}
	&__loading {
		text-align: center;
		color: #999;
		line-height: 45px;
		// margin: 5px 0;
		&-icon {
			width: 20px;
			vertical-align: middle;
			margin-top: -2px;
		}
		&-btn {
			line-height: 45px;
			text-align: center;
			position: relative;
			&::after {
				@include border(top, #BFBFBE);
			}
		}
	}
	&__shop {
		position: absolute;
		width: 100%;
		left: 0;
		top: 0;
		&-logo {
			padding-top: 19px;
			padding-bottom: 9px;
			text-align: center;
			img {
				height: 30px;
			}
		}
		&-title {
			text-align: center;
			font-size: 14px;
			height: 15px;
			line-height: 15px;
			color: #27272a;
			padding: 0 5px;
			@include line(1);
			i {
				background: url();
				width: 14px;
				height: 13px;
				display: inline-block;
				background-size: 14px 13px;
				margin-right: 4px;
				vertical-align: middle;
				margin-top: -2px;
			}
		}
		&-tip {
			font-size: 10px;
			line-height: 12px;
			height: 12px;
			margin-bottom: 15px;
			text-align: center;
			margin-top: 2px;
			color: #999;
		}
		&-btn {
			width: 70px;
			height: 25px;
			line-height: 25px;
			text-align: center;
			position: relative;
			color: #f23030;
			margin: 0 auto;
			font-size: 12px;
			&::after {
				@include border(full, #f23030, 2px);
			}
		}
		&-line {
			padding: 0 10px;
			margin: 16px 0 10px;
			position: relative;
			span {
				display: block;
				width: 100%;
				&::after {
					@include border(bottom, #eaeaea);
				}

			}
			&::after {
				display: block;
				content: "";
				width: 10px;
				height: 5px;
				background: url();
				background-size: 10px 5px;
				position: absolute;
				left: 50%;
				margin-left: -5px;
				top: -5px;
				z-index: 1;
			}
		}
		&-goods {
			padding: 0 10px;
			padding-top: 10px;
			font-size: 0;
			text-align: center;
		}
		&-good {
			display: inline-block;
			width: 50%;
			box-sizing: border-box;
			padding: 0 4px;
			img {
				width: 100%;
			}
		}
	}
}
